/*
 * @Author: byron
 * @Date: 2021-09-08 13:22:32
 * @LastEditTime: 2021-09-10 12:48:29
 */

import Header from './components/Header';
import Footer from './components/Footer';
import List from './components/List';


import React, { Component } from 'react'

export default class App extends Component {
  state = {
    todos:[
      {id:1,name:'吃饭',done:true},
      {id:2,name:'睡觉',done:false},
      {id:3,name:'打代码',done:true},
      {id:4,name:'打篮球',done:true},
    ]
  }

  //! 增加todo项
  addTodo = (todoObj) => {
    const {todos} = this.state
    console.log(todoObj);
    let newTodos = []
    newTodos = [todoObj,...todos]
    this.setState({
      todos : newTodos
    })
  }

  //! 更新todo项
  upTodo = (id,done) => {
    const {todos} = this.state
    const newTodos = todos.map((todo) => {
      if(todo.id === id) return {...todo,done}
      else return todo
    })
    this.setState({
      todos:newTodos
    })
  }

  //! 删除todo项
  delTodo = (id)=>{
    const {todos} = this.state
    const newTodos = todos.filter((todoObj)=>{
      return todoObj.id !== id
    })
    this.setState({
      todos:newTodos
    })
  }

  //! 全选所有todo项
  checkAllTodo = (done)=>{
    const {todos} = this.state
    const newTodos = todos.map((todoObj)=>{
      return {...todoObj,done:done}
    })
    this.setState({
      todos:newTodos
    })
  }

  //! 清除已完成任务
  delDoneTodo = () => {
    const {todos} = this.state
    const newTodos = todos.filter((todoObj)=>{
      return todoObj.done === false
    })
    this.setState({
      todos:newTodos
    })
  }

  //! 渲染组件
  render() {
    const {todos} = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List todos = {todos} upTodo={this.upTodo} delTodo={this.delTodo}  />
          <Footer todos = {todos} checkAllTodo={this.checkAllTodo} delDoneTodo={this.delDoneTodo} />
        </div>
      </div>
    )
  }
}

